<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>v-on demo</span>
        <input v-on:click="click(1)" :value="value">
<!--        v-on:click 简写格式：@click-->
        <Button @click="value++">{{value}}</Button>
<!--        事件修饰符-->
        <span>事件修饰符</span>
        <span>1、冒泡修饰符</span>
        <div style="border:1px solid red;padding:20px" @click="hello">
            大div
            <div style="border:1px solid blue;padding:20px" @click.stop>
                小div
            </div>
        </div>
        <span>2、按键修饰符</span>
        <input type="text" @keyup.up="hello" @keyup.down="hello"></input>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                value:1
            },
            methods:{
                hello(){
                    alert("事件修饰符")
                },
                click(value){
                    this.value+=value
                    console.log(this.value)
                }
            }
        })
    </script>
</body>
</html>
